<template>
    <div class="map-out">
        <div class="change">
            正在浏览：<span>{{active}}</span>
            <i @click="backHome" class="el-icon-s-home"></i>
        </div>
        <div class="map-dom" id="mapDom"></div>
    </div>
</template>

<script>

import * as echarts from 'echarts';
import 'echarts-gl';
import geoJson from "@/view/data/gl.json";

export default {
    name: "mapDom",
    data() {
        return {
            active:'全县'
        }
    },
    mounted() {
        this.reloadPage();
        this.initChart();
    },
    methods: {
        initChart() {
            this.$nextTick(() => {
                let chart = echarts.init(document.getElementById('mapDom'));
                let geoJson = require('./gl.json');
                this.initEcharts(geoJson, '', chart)
            })
        },
        reloadPage() {
            setTimeout(() => {
                window.location.reload()
            }, 1000 * 60 * 10);
        },
        initEcharts(geoJson, titname, chart) {
            echarts.registerMap(titname, geoJson);
            let that = this;
            let option = this.getOption();
            chart.setOption(option);
            chart.on('click', (params)=> {
                // 控制台打印点击的数据信息
                this.active = params.name;
                let option = this.getOption();
                chart.setOption(option);
                this.$emit('activeMap',this.active);
            });
        },
        getOption(){
            return {
                //鼠标经过展示数据方法
                tooltip: {
                    triggerOn: "mousemove",
                    formatter: function (params) {
                        if (isNaN(params.value)) {
                            params.value = 0
                        }
                        if (params.seriesName === '散点') {
                            params.value = params.data.value[2]
                        }
                        let html = '<span>' + params.name + ' ： ' + params.value + '</span><br/>'
                        return html
                    },
                    backgroundColor: 'rgba(29, 38, 71)',
                    color: "#fff",
                    // 额外附加的阴影
                    extraCssText: 'box-shadow:0 0 4px rgba(11, 19, 43,0.8)',
                },
                geo: {
                    show: true,
                    top: '10%',
                    zoom: 1.2,
                    label: {
                        normal: {
                            show: true
                        },
                        emphasis: {
                            show: false,
                            color: "#8595a6",
                        }
                    },
                    roam: true,
                    // data: {
                    //     name: "二郎镇",
                    //     itemStyle: { normal: { areaColor: "#2C6AE8" } },
                    // },
                    regions: [{ // 重点 部分 ,在这里给大家模拟一个省份颜色与界线颜色的修改,如果想修改多个省份就在后面多添加几个对象即可.
                        name: this.active,
                        itemStyle: {
                            normal: {
                                opacity: 1, // 透明度
                                borderColor: "#fff", // 省份界线颜色
                                borderWidth: 3, // 省份界线的宽度
                                areaColor: '#F8943D', // 整个省份的颜色
                                color:'#8595a6',
                                borderType: 'dashed', // 描边类型。
                            },
                            emphasis: {
                                color:'#fff'
                            }
                        },
                    }],
                    itemStyle: {
                        normal: {
                            areaColor: '#8595a6',
                            borderColor: '#fff',

                            textStyle:{
                                color:'#fff',
                            }
                        },
                        emphasis: {
                            areaColor: '#F8943D',
                            color:'#fff',
                            borderType: 'dashed', // 描边类型。
                            textStyle:{
                                color:'#fff',
                            }
                        }
                    }
                },
                //进行气泡标点
                series: [
                    {
                        name: '散点', // 自定义名称
                        type: 'effectScatter', // scatter  effectScatter
                        coordinateSystem: 'geo', // 设置坐标系类型
                        symbol: function (res) {
                            if (res[2].indexOf('片区') != -1) return 'circle';
                            if (res[2].indexOf('社区') != -1) return 'diamond'

                            if (res[2].indexOf('驿站') != -1) return 'triangle';
                            if (res[2].indexOf('区级') != -1) return 'rect';
                            if (res[2].indexOf('街道') != -1) return 'roundRect';
                        },

                        // 设置散点位置和数据
                        symbolSize: function (res) {
                            // 设置散点大小
                            return res[3] ? 10 : 0
                        },
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true, // 是否显示鼠标悬浮动画
                        label: {
                            // 静态显示时的样式
                            normal: {
                                show: true, // 显示地区名称
                                formatter: function (data) { // 显示模板
                                    return '123123'
                                },
                                position: 'bottom', // 显示位置

                            },
                            // 鼠标悬浮上去的样式
                            emphasis: {
                                show: true, // 显示地区名称
                                color: "red",
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: "#131211",
                                shadowBlur: 10,
                            },
                            // 鼠标悬浮上去的样式
                            emphasis: {
                                color: "#131211",
                            },
                        },
                        zlevel: 3
                    }
                ]
            };
        },
        backHome(){
            this.active = '全县';
            let chart = echarts.init(document.getElementById('mapDom'));
            let geoJson = require('./gl.json');
            this.initEcharts(geoJson, '', chart)
            this.$emit('activeMap',this.active);
        }
    }
}
</script>

<style lang="scss" scoped>
.map-out {
    /*height: 400px;*/
    height: 560px;
    width: 800px;
    color: white;
    position: relative;

    .change {
        background-color: rgba(51, 51, 51, 0.1); /* 半透明背景 */
        backdrop-filter: blur(5px); /* 背景模糊 */
        -webkit-backdrop-filter: blur(10px); /* 兼容老版本 Safari */
        opacity: 0.8;
        position: absolute;
        width: 200px;
        height: 40px;
        top: 0px;
        padding-left: 10px;
        line-height: 40px;
        right: 10px;
        color: #2c3e50;
        font-size: 14px;
        z-index: 9999;

        span {
            color: #F8943D;
            font-weight: bold;
        }

        i {
            margin-left: 10px;
            font-size: 20px;
            transition: all .2s ease-in-out;
            cursor: pointer;
        }

        i:hover {
            color: #F8943D;
            transition: all .2s;
            scale: 1.2;
        }
    }

    .map-dom {
        height: 700px;
        width: 800px;
    }

}

@media only screen and (max-width: 1024px) {
    .qwe {
        height: 600px;
        margin: 0 auto;
        width: 100%;
        margin: 0 auto;

        .mapdom {
            height: 400px;
            width: 100%;
            margin-top: 10%;
        }

        .Tipss {
            display: flex;
            justify-content: space-between;
            margin-top: 50px;
            padding-left: 0px;
            padding-right: 0px;

            > div {
                color: whitesmoke;
                margin-bottom: 10px;
                font-size: 12px;
            }

            .iconfont {
                margin-right: 10px;
                font-size: 15px;
            }
        }
    }
}
</style>
